<template>
	<common-card class="portal_shortcut_key">
		<a-link href="link" v-for="(item, index) in shortcutDatas" :key="index" :style="{ '--icon-color': item.color }">
			<template #icon>
				<GiSvgIcon :name="item.icon" :size="32"></GiSvgIcon>
			</template>
			<span class="arco-link-text">{{ item.name }}</span>
		</a-link>
	</common-card>
</template>

<script lang="ts" setup>
import commonCard from '../commonCard.vue';
defineOptions({ name: 'ShortcutKey' });
interface shortcutProp {
	color?: string;
	name: string;
	icon: string;
}
const shortcutDatas = ref<shortcutProp>([
	{ color: '#3678f3', name: '学院思想政治教育与心理健康服务系统', icon: 'sw-books' },
	{ color: '#498fca', name: '智慧教师数据采集与融合系统', icon: 'sw-fusion' },
	{ color: '#6038f0', name: '教育资源管理系统', icon: 'sw-resources' },
	{ color: '#ff716f', name: '学员心理健康群体画像', icon: 'sw-personal' },
	{ color: '#ec6a2c', name: '人力资源管理系统', icon: 'sw-human' },
	{ color: '#f4b303', name: '军事职业教育平台', icon: 'sw-education' },
	{ color: '#eeb503', name: '财务管理系统', icon: 'sw-finance' },
	{ color: '#7a8ffa', name: '教保管理系统', icon: 'sw-safe' },
	{ color: '#45a3fd', name: '被装申领系统', icon: 'sw-applyfor' }
]);
</script>

<style lang="scss" scoped>
.portal_shortcut_key {
	&:deep(.arco-card-body) {
		display: grid !important;
		padding: 20px !important;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20px;
	}
	.arco-link {
		padding: 0;
		height: 130px;
		overflow: hidden;
		border-radius: 4px;
		flex-direction: column;
		box-sizing: border-box;
		color: var(--color-text-2);
		border: solid 1px var(--color-border-1);
		&:hover {
			transform: translateY(-2px);
			background-color: transparent;
			border-color: var(--color-border-4);
		}
	}
	&:deep(.arco-link-icon) {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: solid 1px var(--color-border-1);
		background-color: var(--color-fill-2);
		aspect-ratio: 27/12;
		width: 100%;
		margin: 0;
	}
	&:deep(.svg-icon) {
		fill: #fff;
		padding: 10px;
		border-radius: 8px;
		background-color: var(--icon-color);
	}
	.arco-link-text {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 1.25;
		padding: 0 16px;
		flex-shrink: 0;
		height: 48px;
	}
}
</style>
